<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="module">
        /* 
        js 为什么有异步?
            -js是单线程,同一时刻,只能干一件事
        js 的任务:
            -异步和同步
            -同步任务,依次执行
            -异步任务,不是按照顺序执行
        */


    //    console.log(111);
    //    setTimeout(() => {
    //         console.log(222);
    //    },0);
    //    console.log(333);
    //    setTimeout(() => {
    //     console.log(444);
    // },0)
    // 执行结果: 111 333  222 444

    //需求:需要异步之后执行一些事情
        console.log(111);
        setTimeout(() => {
           console.log("setTimeout"); 
        }, 1000);
        console.log(222);
        console.log("异步???"); // 不是异步代码
        import syncFn from './syncFn.js';
        // 回调函数
        syncFn(function(){
            console.log("异步之后执行代码");  
        })

        // 执行结果: 111 222 异步???  setTimeout setTimeout  异步之后执行代码


        //多个回调使用
        function fn1(cb){
            setTimeout(() => {
                console.log("fn1");
                cb();
            }, 1000);
        }
        function fn2(cb){
            setTimeout(() => {
                console.log("fn2");
                cb();
            }, 1000);
        }
        function fn3(cb){
            setTimeout(() => {
                console.log("fn3");
                cb();
            }, 1000);
        }

        /* 
        回调地狱:  回调出现层层嵌套
        可读性差,可维护性差
        有错误时,没法定位及捕捉
        解决回调地域的问题:
            -1.观察者模式
            -2.ES6: promise
        */

        fn1(function(){
            console.log("fn1执行完毕了");
            fn2(function(){
                console.log("fn2执行完毕了");
                fn3(function(){
                    console.log("fn3执行完毕了");
                })
            })
        })
    </script>
</body>

</html>